import React, {Component} from 'react';
import {withRouter, Link, Switch, Route} from 'react-router-dom'
import {Input, DatePicker, InputNumber, Button} from 'antd';
import Loading from "./../loading"

import "./../../static/specialMonitoring/addTopic.styl"
import u from "../../common";
import $ from 'jquery'
import moment from 'moment';
import {message} from "antd/lib/index";

const {RangePicker} = DatePicker;

export default class TopicSetting extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      index: props.index,
      initialNum: {},
      startTime:"",
      endTime:"",
      frequency: -1,
      endTimeChuo: '',
      newChuo: '',

    };
  }
  goRouter(d) {
    this.props.history.push(d)
  }
  onChangeDate=async(value, dateString)=>  {
    
  }

  componentDidMount() {
    let newChuo = parseInt(new Date().getTime()/1000)
    this.setState({
      newChuo: newChuo
    })
    this.initialTopic();
  }

  onOkDate = async(value, dateString)=> {
    let endTimeChuo = (new Date(moment(value[1]._d).format('YYYY-MM-DD HH:mm:ss')).getTime())/1000
    let newChuo = this.state.newChuo
    let startTime =  moment(value[0]._d).format('YYYY-MM-DD HH:mm:ss')
    let endTime =  moment(value[1]._d).format('YYYY-MM-DD HH:mm:ss')
    this.setState(prevState => ({
      startTime: startTime,
      endTime: endTime,
      endTimeChuo: endTimeChuo,
      newChuo: newChuo
    }),()=>{
      $("#topicName").val(this.state.initialNum.module_name);
      $("#keyWord1").val(this.state.initialNum.area_key);
    });
  }

  onChangeKey=async(value)=>{
    this.setState(prevState => ({
      frequency: value
    }));
  }

  // 获取当前专题初始值
  initialTopic = () => {
    u.topicList(data => {
      if (data.message !== undefined) {
        message.error(data.message);
      }
      if (data.length > 0) {
        for (let i = 0; i < data.length; i++) {
          if (data[i].id == this.state.index) {
            this.setState((prevState) => ({
              initialNum: data[i]
            }), () => {
              setTimeout(() => {
                $("#topicName").val(this.state.initialNum.module_name);
                $("#keyWord1").val(this.state.initialNum.area_key);
              }, 200);
             
              // $("#keyWord2").attr("value", this.state.initialNum.event_key);
            });
          }
        }
      }
    });
  };
  // 修改专题信息
  modifyTopics = async () => {
    let endTimeChuo = this.state.endTimeChuo
    let newChuo = this.state.newChuo
    let endTimeChuo2 = (new Date(moment(this.state.initialNum.end_time).format('YYYY-MM-DD HH:mm:ss')).getTime())/1000
    if (endTimeChuo && Number(endTimeChuo) < Number(newChuo)) {
      return message.error('选择日期不能小于当天')
    }
    if (!endTimeChuo && (Number(endTimeChuo2) < Number(newChuo))) {
      return message.error('选择日期不能小于当天')
    }
    if($("#topicName").val()==""){
      message.warning('请填写专题名称');
    }else if($("#keyWord1").val()==""){
      message.warning('请填写地名关键词');
    } else{
      u.modifyTopic({
        id:Number(this.state.index),
        moduleName: $("#topicName").val(),
        startTime:this.state.startTime==""?this.state.initialNum.start_time:this.state.startTime,
        endTime:this.state.endTime==""?this.state.initialNum.end_time:this.state.endTime,
        areaKey:$("#keyWord1").val(),
        // eventKey:$("#keyWord2").val(),
        frequency:this.state.frequency==-1?this.state.initialNum.frequency:this.state.frequency
      },data=>{
        if(data.statusCode===200){
          message.success('修改成功');
          window.location.href = u.testurl+'/topicDetail?index=' + this.state.index + "&key=" + 1;
          window.location.reload();
        }else{
          message.error(data.message);
        }
      })
    }
  };
  componentWillMount() {

    // console.log(this.state.initialNum)
  }

  render() {
  
    return (
      <div className="at-content">
        <Loading/>
        <div className="at-line">
          <span className="at-title">专题名称:</span>
          {this.state.initialNum && <Input placeholder='请输入专题名称'  id="topicName"/> }
        </div>
        <div className="at-line atl-time">
          <span className="at-title">选择日期:</span>
          {
            this.state.initialNum.start_time && <RangePicker
              showTime={{format: 'HH:mm'}}
              format="YYYY-MM-DD HH:mm"
              placeholder={['Start Time', 'End Time']}
              onChange={this.onChangeDate}
              onOk={this.onOkDate}
              defaultValue={[moment(this.state.initialNum.start_time), moment(this.state.initialNum.end_time)]}
            />
          }

        </div>
        <div className="at-line">
          <span className="at-title">监测关键词:</span>
          {this.state.initialNum && <Input placeholder='请输入事件关键词' id="keyWord1"/>}
          {/*<Input placeholder="请输入事件关键词" className="keyEvent" id="keyWord2"/>*/}
        </div>
        <div className="at-line">
          <span className="at-title">检测频率(选填):</span>
          {
            (this.state.initialNum.frequency || this.state.initialNum.frequency == 0) && <InputNumber
              defaultValue={this.state.initialNum.frequency}
              min={0}
              max={100}
              formatter={value => `${value}%`}
              parser={value => value.replace('%', '')}
              onChange={this.onChangeKey}
            />
          }
        </div>
        <Button type="primary" style={{marginLeft: 125, marginRight: 30}} onClick={this.modifyTopics}>提交</Button>
        <Link to={'/topic'}><Button>取消</Button></Link>
      </div>
    );
  }
}